<template>
	<view id="allmap" class="allmap" />
</template>
<script>
	// 仅可在 Web 端使用, 因为 APP 端无法操作 dom,使用 window 对象
	import {
		BMapLoader
	} from '@/utils/bdMap'
	export default {
		name: 'BMap',
		data() {
			return {
				map: null
			}
		},
		onShow() {
			this.initMap()
		},
		beforeDestroy() {
			if (this.map) {
				this.map.destroy()
			}
		},
		methods: {
			// 初始化地图
			initMap() {
				this.$nextTick(() => {
					BMapLoader().then(BMap => {
						this.map = new BMap.Map('allmap')
						this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
						// 添加中心点和缩放等级，如果不添加，初始化出来页面为白屏
						const point = new BMap.Point(108.970588, 34.224352); // 创建点坐标
						this.map.centerAndZoom(point, 17)
					})
				})
			}
		}
	}
</script>

<style>
	.allmap {
		width: 100%;
		height: 100%;
		position: absolute;
	}
</style>